<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>History</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <style type="text/css">
    #filtertable {
    	width: 100%;
    }
    #filtertable td:nth-child(1) {
    	width: 50%;
    }
    #filtertable td:nth-child(2) {
    	width: 25%;
    }
    #filtertable td:nth-child(3) {
    	width: 25%;
    }
    #filtertable select {
    	width: 100%;
    }
    form[name="frm"] div {
    	cursor: pointer;
    }
    </style>
</head>
<body>
<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="dashboard.html"><i class="icon-home icon-black"></i> Dashboard</a></li>
                    <li class="active"><a href="history.html"><i class="icon-time icon-black"></i> History</a></li>
                    <li><a href="tasks.html"><i class="icon-check icon-black"></i> Tasks</a></li>
                </ul>
                <div href="#" class="btn btn-success disabled" style="margin-left: 100px;">Balance: +354,33 &euro;</div>
                <div class="pull-right">
                    <a href="#add" onclick="Reset()" role="button" class="btn btn-primary" data-toggle="modal">Add expense</a>
                    <div class="btn-group">
                        <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
                            Niko
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="settings.html"><i class="icon-cog icon-black"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html"><i class="icon-off icon-black"></i> Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Add expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveandnew" class="btn btn-primary">Save changes and add new</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

<div class="container">
    <div id="alertikus1"></div>
    <h2>History - Year</h2>
	<div class="accordion" id="accordion">
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse"><i id="filter-icon" class="icon-chevron-right"> </i>Filter</a>
			</div>
			<div id="collapse" class="accordion-body collapse">
				<div class="accordion-inner">
					<table id="filtertable">
						<thead>
							<tr>
								<td></td>
								<th>Categories</th>
								<td><label class="checkbox"><input type="checkbox" id="filtercheckbox">Select all</label></td>
							</tr>
							<tr>
								<td>
									<form class="span3 form-search">
										<div class="input-prepend">
											<button type="submit" class="btn"><i class="icon-search"></i></button>
											<input type="text" class="span2 search-query">
										</div>
									</form>
								</td>
								<td colspan="2">
									<select multiple="multiple" id="filtercategories">
										<option>Salary</option>
				                        <option>Clothes</option>
				                        <option>Rent</option>
				                        <option>Household</option>
				                        <option>Leisure</option>
				                        <option>Cat</option>
				                        <option>Car</option>
				                        <option>Doctor</option>
				                        <option>Medicine</option>
				                        <option>Office Material</option>
									</select>
								</td>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div align="center" style="margin:20px 0px 20px 0px;">
	 <a class="btn btn-large" href="history.html">2012</a>
	</div>
	<form class="well" name="frm">
	<table width="100%">
	 <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">December</a></td>
    <td width="75%">
      <div style="background-image: url('assets/img/HistoryTopYear.png');height:110px;background-repeat: no-repeat; background-size:100%;margin: 0px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
      
      </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
	 
	 <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">November</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear1.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">October</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear2.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">September</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear3.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">August</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear4.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">July</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear5.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">June</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear1.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">Mai</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear2.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">April</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear3.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">March</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear4.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">February</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear5.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
    
    <tr>
  	<td width="15%" align="center"><a class="btn" href="historyMonth.html">January</a></td>
    <td width="75%">
    <div style="background-image: url('assets/img/HistoryEntryYear1.png');height:70px;background-repeat: no-repeat; background-size:100%;margin: 20px 0px 20px 0px;" onclick="document.location.href='historyMonth.html'; return false;">
    </div>
    </td>
    <td width="10%" align="center"><a class="btn" href="detail.html"><i class="icon-align-justify"></i></a></td>
	 </tr>
	 
	</table>
    </form>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#inputCategory').chosen();
    });
    
    $(function() {
    	$('#accordion').on('show', function() {
    		$('#filter-icon').removeClass('icon-chevron-right').addClass('icon-chevron-down');
    	});
    	$('#accordion').on('hide', function() {
    		$('#filter-icon').removeClass('icon-chevron-down').addClass('icon-chevron-right');
    	});
    });
    
    $(function() {
    	$('#filtercategories').change(function() {
    		$('#filtercheckbox').attr('checked', false);
    	});
    	
    	$('#filtercheckbox').change(function() {
    		$('#filtercategories option').prop('selected', $('#filtercheckbox').is(':checked'));
    	});
    });
</script>
	<script type="text/javascript">
	$('#add button').each(function(index) {
		$(this).click(function() {
			$('#add form')[0].reset();
		});
	});
	</script>
	<script type="text/javascript">
	$('#saveonly').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus1').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus1').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('#saveandnew').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus2').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus2').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('a[href="#add"]').click(function() {
		$('#alertikus1').html('');
		$('#alertikus2').html('');
	});
	</script>

</body>
</html>
                                                                                             